import { defineComponent, reactive } from "vue";
import styles from "./MyCollection.module.less";
import { imgPath } from "@/common/utils";
export default defineComponent({
  name:'userCenterMyCollection',
  setup() {
    const state = reactive({
      card_list: [
        // {
        //   name: "中联金安太平洋之旅旅游意外险宁波特色方案（互联网专属）简约国内一",
        //   list: ["急性病", "丧葬费", "医疗费用", "意外伤害", "住院津贴"]
        // },
        // {
        //   name: "中联金安平安行旅游意外保险（互联网专属）境内方案二（含边境游）",
        //   list: ["意外伤害", "急性病风险", "医疗费用", "旅行不便", "住院津贴"]
        // },
        // {
        //   name: "中联金安太平洋之旅旅游意外险宁波特色方案（互联网专属）国内2",
        //   list: ["急性病风险保障", "紧急救援保障", "旅行不便风险保障", "医疗风险保障", "意外伤害风险保障"]
        // }
      ],
      total: 0,
      page: 1,
    } as any)
    const Arrange = (e: any) => (
      <div class={styles.cardBox}>
        <div class={styles.leftBox}>
          <div class={styles.titleBox}>
            {e.name}
          </div>
          <ul class={styles.list_style}>
            {
              e.list.map((item: any) => {
                return <li>{item}</li>
              })
            }
          </ul>
        </div>
        <div class={styles.rightBox}>
          <img data-v-34d02279="" src="" alt="保险公司" class="logo"></img>
          <div class={styles["btn_box"]}>
            <div class={styles["detail_btn"]}>
              查看详情
            </div>
            <div class={styles.cancelBtn}>
              取消收藏
            </div>
          </div>
        </div>
      </div>
    )
    return () => (
      <div class={styles.myCollection}>
        <div class={styles["head_box"]}>
          我的收藏
        </div>
        <div class={styles["content_box"]}>
          {
            state.card_list.length === 0 ? <div class={styles['no-message']}>
              <img src={imgPath('/home/no-message.jpg')} />
            </div> : <>
              {
                state.card_list?.map((item: any) => {
                  return Arrange(item)
                })
              }
            </>
          }
        </div>
        <div class={styles["bottom_box"]}>
          {
            state.card_list.length === 0 || <a-pagination total={state.total} v-model:current={state.page} />
          }
        </div>
      </div>
    )
  }
})